<template>
  <div class="wechatLogin">
    <!-- <div class="icon flex_c_fs_c">
      <i class="iconfont iconweixin"></i>
    </div> -->
    <div class="iconWrapper">
      <div class="circleProgress_wrapper">
        <div class="wrapper right">
          <div class="circleProgress rightcircle"></div>
        </div>
        <div class="wrapper left">
          <div class="circleProgress leftcircle"></div>
        </div>
      </div>
      <i class="iconfont iconweixin"></i>
    </div>
  </div>
</template>

<script>
import wechatApi from '@/api/wechat'
import {getVenuesId} from '@/utils/auth'
export default {
  data() {
    return {}
  },
  methods: {
    getSearchString(key, Url) {
      let str = Url
      let arr = str.split('&')
      let obj = {}
      for (let i = 0; i < arr.length; i++) {
        let tmpArr = arr[i].split('=')
        obj[decodeURIComponent(tmpArr[0])] = decodeURIComponent(tmpArr[1])
      }
      return obj[key]
    },
    getWechatCode() {
      let params = []
      params = window.location.href.split('?')
      let code = this.getSearchString('code', params[1])
      this.getWechatInfo(code)
    },
    getWechatInfo(code) {
      wechatApi.getWechatInfo({code: code}).then((res) => {
        // if (this.$tools.isNullOrEmpty(res.data)) {
        //   return
        // }
        this.$store.dispatch('setLoginData', res)
        if (!this.$tools.isNullOrEmpty(getVenuesId())) {
          // 如果有venuesId, 则表示是通过扫码进来的, 则进去arrivalConfirm页, 无论有没有登陆
          this.$tools.goHref('arrivalConfirm')
          return
        }
        if (this.$tools.isNullOrEmpty(res.data.userinfo.token) && this.$tools.isNullOrEmpty(res.data.userinfo.status)) {
          // token为null, 则表示用户未绑定微信, 需要跳转到手机绑定界面操作
          // 因为要去除URL上面的code等的信息, 需要重新拼接一个干净的url做跳转
          this.$tools.goHref('bindPhone')
        } else if (!this.$tools.isNullOrEmpty(res.data.userinfo.token) && res.data.userinfo.status === 'hidden') {
          // 用户已绑定微信, 已填写个人信息, 但未审核通过
          this.$dialog
            .alert({
              title: '提示',
              message: '您的个人信息尚未审核,\n请联系您的联系人!',
              messageAlign: 'center',
              confirmButtonColor: '#31A2A3'
            })
            .then(() => {
              this.$tools.goHref('index')
            })
        } else {
          // 正常登陆状态
          if (this.$tools.isNullOrEmpty(getVenuesId())) {
            // 如果没有venuesId, 则表示不是通过扫码进来的, 直接进去booking页
            this.$tools.goHref('booking')
          } else {
            // 如果有venuesId, 则表示是通过扫码进来的, 则进去arrivalConfirm页
            // this.$tools.goHref('arrivalConfirm')
          }
        }
      })
    }
  },
  mounted() {
    this.getWechatCode()
  }
}
</script>

<!-- Add "scoped" attribute to limit CSS to this component only -->
<style lang="less" scoped>
.wechatLogin {
  // padding: 1.6rem 1.4rem;
  // box-sizing: border-box;
  height: 100%;
  .icon {
    height: 100%;
    padding-top: 10rem;
    box-sizing: border-box;
    i {
      color: #05b10f;
      font-size: 8rem;
    }
  }
}
.iconWrapper {
  position: absolute;
  width: 100%;
  height: 100%;
  z-index: 2000;
  // -webkit-animation: fadeOut 4s linear 1;
  i {
    position: absolute;
    top: calc(50% - 4rem);
    left: calc(50% - 5.1rem);
    color: #05b10f;
    font-size: 8rem;
  }
}
.circleProgress_wrapper {
  width: 16rem;
  height: 18rem;
  margin: 10rem auto;
  position: relative;
  top: calc(50% - 18rem);
  // left: calc(50% - 18rem);
}
.wrapper {
  width: 8rem;
  height: 18rem;
  position: absolute;
  top: 0;
  overflow: hidden;
}
.right {
  right: 0;
}
.left {
  left: 0;
}
.circleProgress {
  width: 16rem;
  height: 16rem;
  border: 0.2rem solid transparent;
  border-radius: 50%;
  position: absolute;
  top: 0;
  transform: rotate(-135deg);
}
.rightcircle {
  border-top: 0.2rem solid #05b10f;
  border-right: 0.2rem solid #05b10f;
  right: 0;
  animation: circleProgressLoad_right 3s linear 1;
  animation-fill-mode: forwards;
}
.leftcircle {
  border-bottom: 0.2rem solid #05b10f;
  border-left: 0.2rem solid #05b10f;
  left: 0;
  animation: circleProgressLoad_left 3s linear 1;
  animation-fill-mode: forwards;
}
@keyframes circleProgressLoad_right {
  0% {
    -webkit-transform: rotate(-135deg);
  }
  50%,
  100% {
    -webkit-transform: rotate(45deg);
  }
}
@keyframes circleProgressLoad_left {
  0%,
  50% {
    -webkit-transform: rotate(-135deg);
  }
  100% {
    -webkit-transform: rotate(45deg);
  }
}
@keyframes fadeOut {
  0% {
    opacity: 1; /*初始状态 透明度为0*/
  }
  50% {
    opacity: 1; /*中间状态 透明度为0*/
  }
  100% {
    opacity: 0; /*结尾状态 透明度为1*/
  }
}
@keyframes fadeIn {
  0% {
    opacity: 0; /*初始状态 透明度为0*/
  }
  50% {
    opacity: 0.5; /*中间状态 透明度为0*/
  }
  100% {
    opacity: 1; /*结尾状态 透明度为1*/
  }
}
</style>
